<!DOCTYPE html>
<html>
<head>
<title> Rolling Two Circle </title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;margin:auto">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<div id="log">
  Coba
</div>

<div id="logMat">
  Coba
</div>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var RGBA = [];

function randomSliceColor(slice)
{
	for(i=0;i<slice;i++)
	{
		var col = { 
			r : Math.floor((Math.random()*255)+1),
			g : Math.floor((Math.random()*255)+1), 		
			b : Math.floor((Math.random()*255)+1)
		};
		RGBA.push(col);
	}
}

function makePie(centerX, centerY, R, slice, rotate, numRotate)
{
	for(i=0;i<slice;i++)
	{
		var ind = (i - numRotate) % slice;
		if(numRotate >= numSlice) numRotate %= slice;
		if(ind < 0) ind += slice;
		var strRGBA = "rgba(" + RGBA[ind].r + "," + RGBA[ind].g + "," + RGBA[ind].b + ",0.5)";
		ctx.fillStyle = strRGBA;
		
		//Draw the triangle per slice
		ctx.beginPath();
		ctx.moveTo(centerX + R*Math.sin((-2*i+1)/slice*Math.PI - rotate),
				   centerY + R*Math.cos((-2*i+1)/slice*Math.PI - rotate));
		ctx.lineTo(centerX,
				   centerY);
		ctx.lineTo(centerX + R*Math.sin((-2*i-1)/slice*Math.PI - rotate),
				   centerY + R*Math.cos((-2*i-1)/slice*Math.PI - rotate));
		ctx.stroke();
		ctx.fill();
		
		//Draw the arc per slice
		ctx.beginPath();
		adjust = (slice-2)/2;
		ctx.arc(centerX, centerY, R, 
			    ((i*2+adjust)/slice)*Math.PI + rotate, 
				((i*2+adjust+2)/slice)*Math.PI + rotate);
		ctx.stroke();
		ctx.fill();	
	}
}

radiusBigCircle = canvas.width/2;
radiusSmallCircle = radiusBigCircle - 50;
numSlice = 8;
numRotateSmall = 0;
numRotateBig = 2*numSlice;

randomSliceColor(numSlice);

makePie(canvas.width/2,canvas.height/2,radiusBigCircle,numSlice,0,0);
makePie(canvas.width/2,canvas.height/2,radiusSmallCircle,numSlice,0,0);

canvas.addEventListener('click', click, false);

function getMouse(event)
{
	var element = canvas, offsetX = 0, offsetY = 0, mx, my;

	// Compute the total offset
	if (element.offsetParent !== undefined) {
		do {
			offsetX += element.offsetLeft;
			offsetY += element.offsetTop;
			document.getElementById("logMat").innerHTML = offsetX + "#" + offsetY + "#";
		} while ((element = element.offsetParent));
	}
	
	if (document.defaultView && document.defaultView.getComputedStyle) 
	{
		stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)      || 0;
		stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)       || 0;
		styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10)  || 0;
		styleBorderTop   = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10)   || 0;
	}
	var html = document.body.parentNode;
	htmlTop = html.offsetTop;
	htmlLeft = html.offsetLeft;

	// Add padding and border style widths to offset
	// Also add the <html> offsets in case there's a position:fixed bar
	offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
	offsetY += stylePaddingTop + styleBorderTop + htmlTop;
	document.getElementById("logMat").innerHTML += offsetX + "#" + offsetY + "#";

	mx = event.pageX - offsetX;
	my = event.pageY - offsetY;

	// We return a simple javascript object (a hash) with x and y defined
	return {x: mx, y: my};
}

function click(event)
{
	mp = getMouse(event);
	distance = Math.sqrt( (mp.x-canvas.width/2)*(mp.x-canvas.width/2) + (mp.y-canvas.width/2)*(mp.y-canvas.width/2) );
	document.getElementById("log").innerHTML = mp.x + "#" + mp.y + "#" + distance ;
	
	if( distance < radiusSmallCircle)
	{
		document.getElementById("log").innerHTML += "<br> Lingkaran Kecil";
		angleRotate = 0;
		if(numRotateSmall==0) numRotateSmall = numSlice - 1;
		var int = window.setInterval(	
					function()
					{
						ctx.fillStyle = "white";
						ctx.fillRect(0,0,canvas.width,canvas.width);
						makePie(canvas.width/2,canvas.height/2,radiusBigCircle,numSlice,0,(numRotateBig==2*numSlice?2*numSlice:numRotateBig-1));
						makePie(canvas.width/2,canvas.height/2,radiusSmallCircle,numSlice,angleRotate,numRotateSmall);
						angleRotate += 2*Math.PI/(numSlice*100);
						if(angleRotate>2*Math.PI/numSlice) 
						{
							window.clearInterval(int);
						}
					},1);
		numRotateSmall++;
	}
	else if( distance < radiusBigCircle)
	{
		document.getElementById("log").innerHTML += "<br> Lingkaran Besar";
		angleRotate = 0;
		if(numRotateBig==2*numSlice) numRotateBig = numSlice + 1;
		var int = window.setInterval(	
					function()
					{
						ctx.fillStyle = "white";
						ctx.fillRect(0,0,canvas.width,canvas.width);
						makePie(canvas.width/2,canvas.height/2,radiusBigCircle,numSlice,angleRotate,numRotateBig);
						makePie(canvas.width/2,canvas.height/2,radiusSmallCircle,numSlice,0,(numRotateSmall==0?0:numRotateSmall+1));
						angleRotate -= 2*Math.PI/(numSlice*48);
						if(angleRotate<-2*Math.PI/numSlice) 
						{
							window.clearInterval(int);
						}
					},1);
		numRotateBig--;
	}
	else
	{
		document.getElementById("log").innerHTML += "<br> Diluar Lingkaran";
	}
}
</script> 

</body>
</html>
